<template>
    <div class="friendsRequestItem">
        <img :src="props.item.requestAvatar" alt="头像"/>
        <div class="info">
            <div class="name">{{props.item.requestUserName}}</div>
            <div class="remark">{{props.item.requestMessage ? props.item.requestMessage : '无'}}</div>
        </div>
        <div class="status">
            <span v-if="props.item.status==1">已添加</span>
            <span v-if="props.item.status==-1">已忽略</span>
            <span v-if="props.item.status==-2">已过期</span>
            <button v-if="props.item.status==0" @click="handleAgree">接受</button>
        </div>
    </div>
</template>
<script lang="ts" setup>
// 导入工具
import { message } from "ant-design-vue"
import { agreeFriendRequest } from '@/lib/api'
import useFriendStore from '@/stores/friendStore';
// 导入组件
// 创建属性
const friendStore = useFriendStore();
const props = defineProps({
    item: {
        type: Object,
        default: () => {}
    }
})
const handleAgree = async () => {
    agreeFriendRequest(props.item.requestId).then(res=> {
        if(res.code == 0) {
            message.success('好友已添加!')
            // 修改状态
            friendStore.updateFriendRequestStatus(props.item.id, 1)
        }
    })
}
</script>
<style lang="less" scoped>
.friendsRequestItem {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 96%;
    margin: 0 auto;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    padding: 20px 0;
    img {
        height: 45px;
        width: 45px;
        border-radius: 3px;
    }
    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 40px;
        .name {
            font-size: 12px;
        }
        .remark {
            color: #928f8f;
            font-size: 12px;
        }
    }
    .status {
        span {
            color: #ccc;
            font-size: 13px;
        }
        button {
            border: none;
            color: white;
            background-color: #07c160;
            font-size: 12px;
            padding: 3px 10px;
            padding: 3px 10px;
        }
    }
}
</style>